<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table thead {
            background-color: blue;
            color: aliceblue;
        }
        table {
            margin: left;
            border: 2px solid aliceblue;
        }
        table tbody {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        <p>请输入姓名: <input type="text" class="name"></p> 
        <p>请输入邮箱: <input type="text" name="" id="" class="email"></p> 
        <button>添加</button>
    </div>
    <div>
        <table>
            <thead>
                <tr> 
                    <th>姓名</th>
                    <th>邮箱</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
    <script>
        const btn = document.querySelector('button');
        btn.addEventListener('click',()=>{
            const name = document.querySelector('.name');
            const email = document.querySelector('.email');
            const s1 = name.value.trim(),s2 = email.value.trim();
            if(s1.length > 0 && s2.length > 0){
                const tr = document.createElement('tr');
                const th1 = document.createElement('th');
                th1.innerHTML = s1;
                const th2= document.createElement('th');
                th2.innerHTML = s2;
                tr.appendChild(th1);
                tr.appendChild(th2);
                const tbody = document.querySelector('tbody');
                tbody.appendChild(tr);
                // 添加完清空数据
                name.value = email.value = '';
            }else{
                alert('请输入姓名和邮箱');
            }
        },false); 
    </script>
</body>
</html>